فهم واستخدام Promise في JavaScript

الواجهة البرمجية Promise في JavaScript: مفهومها، استخداماتها، وأهميتها في البرمجة الحديثة

تُعتبر الواجهة البرمجية Promise إحدى الأدوات الأساسية في JavaScript التي تسهم بشكل رئيسي في تسهيل العمل مع العمليات غير المتزامنة (Asynchronous Operations). قبل ظهور Promise، كان التعامل مع العمليات غير المتزامنة يعتمد على استخدام النداءات المتداخلة (Callback Functions) التي كانت تسبب مشاكل كثيرة خاصة عندما يكون هناك العديد من العمليات غير المتزامنة التي تعتمد على بعضها البعض. في هذا المقال، سنتناول بالتفصيل مفهوم الواجهة البرمجية Promise، كيفية استخدامها، وأهميتها في تطوير البرمجيات.

ما هي الـ Promise؟

في JavaScript، تمثل الـ Promise عقدًا بين الكود الذي سيبدأ في تنفيذ عملية غير متزامنة، وبين الكود الذي يتوقع نتائج هذه العملية. ببساطة، الـ Promise هي عبارة عن كائن (Object) يُستخدم لإدارة العمليات غير المتزامنة، ويعود بحالة واحدة من ثلاث حالات:

1. معلق (Pending): هذه هي الحالة الأولية للكائن Promise. يشير إلى أن العملية التي تم تعيينها ما تزال جارية ولم تكتمل بعد.

2. مكتمل (Fulfilled): عندما تُنفذ العملية بنجاح، يتم تغيير حالة الـ Promise إلى “مكتمل”، وتُعيد النتيجة أو القيمة.

3. مرفوض (Rejected): في حالة حدوث خطأ أثناء تنفيذ العملية، فإن حالة الـ Promise تتغير إلى “مرفوض”، وتُعيد السبب (عادةً ما يكون رسالة خطأ).

يُعتبر الـ Promise أداة مهمة في البرمجة لأنّها تسمح للبرمجيين بتنفيذ الكود بشكل غير متزامن، مما يؤدي إلى تحسين تجربة المستخدم من خلال السماح بمهام متعددة في نفس الوقت دون التأثير على أداء البرنامج.

أنواع الـ Promise

هناك ثلاث حالات رئيسية يمكن أن يتواجد فيها الـ Promise:

1. Pending (معلق): عند إنشاء الكائن Promise، يبدأ في هذه الحالة. لا يزال ينتظر استكمال العملية غير المتزامنة.

2. Fulfilled (مكتمل): بعد استكمال العملية بنجاح، يتغير الكائن إلى هذه الحالة ويُرسل النتيجة أو القيمة التي تم الحصول عليها.

3. Rejected (مرفوض): في حالة فشل العملية أو حدوث خطأ فيها، يتغير الكائن إلى هذه الحالة ويُرسل السبب أو الخطأ الذي حدث.

كيفية إنشاء واستخدام الـ Promise

إنشاء كائن Promise

لإنشاء كائن من النوع Promise، يُستخدم البنية التالية:

javascript
CopyEdit
let promise = new Promise(function(resolve, reject) {
  // الكود غير المتزامن هنا
});

• resolve: هي دالة تُستدعى عندما تكتمل العملية بنجاح، وتُمرر إليها القيمة التي تُمثل النتيجة.

• reject: هي دالة تُستدعى عندما يحدث خطأ أثناء تنفيذ العملية، وتُمرر إليها السبب أو الخطأ.

مثال عملي

لنأخذ مثالًا بسيطًا حيث نقوم بمحاكاة عملية غير متزامنة مثل استرجاع بيانات من الخادم (API):

javascript
CopyEdit
let promise = new Promise(function(resolve, reject) {
  let success = true; // محاكاة النجاح أو الفشل

  if(success) {
    resolve("تمت العملية بنجاح");
  } else {
    reject("حدث خطأ أثناء العملية");
  }
});

promise
  .then(function(result) {
    console.log(result); // سيتم تنفيذ هذا في حالة النجاح
  })
  .catch(function(error) {
    console.log(error); // سيتم تنفيذ هذا في حالة الفشل
  });

في المثال السابق، يتم إنشاء كائن Promise يحتوي على منطق لمحاكاة إتمام عملية معينة بنجاح أو فشل. إذا كانت العملية ناجحة، سيتم استدعاء resolve()، وإذا حدث خطأ سيتم استدعاء reject().

استخدام الـ Promise مع .then() و .catch()

• .then(): تُستخدم هذه الدالة للتعامل مع النتيجة التي تُعاد عند اكتمال العملية. تُنفذ عندما يكون الـ Promise في حالة “مكتمل”.

• .catch(): تُستخدم للتعامل مع الأخطاء التي قد تحدث أثناء تنفيذ العملية غير المتزامنة، وتُنفذ عندما يكون الـ Promise في حالة “مرفوض”.

مثال على استخدام .then() و .catch()

javascript
CopyEdit
let promise = new Promise(function(resolve, reject) {
  let success = true;

  if(success) {
    resolve("العملية ناجحة");
  } else {
    reject("خطأ في العملية");
  }
});

promise
  .then(function(result) {
    console.log(result); // "العملية ناجحة"
  })
  .catch(function(error) {
    console.log(error); // "خطأ في العملية"
  });

سلسلة الوعود: استخدام .then() بشكل متسلسل

واحدة من الخصائص القوية للـ Promise هي القدرة على إجراء سلسلة من العمليات غير المتزامنة بطريقة منظمة باستخدام .then() متسلسل. هذا يُسهّل التعامل مع العمليات التي تعتمد على بعضها البعض.

مثال على سلسلة Promise

javascript
CopyEdit
let promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve("المرحلة الأولى: العملية تمّت بنجاح");
  }, 1000);
});

promise
  .then(function(result) {
    console.log(result); // "المرحلة الأولى: العملية تمّت بنجاح"
    return "المرحلة الثانية: العملية تمّت بنجاح";
  })
  .then(function(result) {
    console.log(result); // "المرحلة الثانية: العملية تمّت بنجاح"
    return "المرحلة الثالثة: العملية تمّت بنجاح";
  })
  .then(function(result) {
    console.log(result); // "المرحلة الثالثة: العملية تمّت بنجاح"
  })
  .catch(function(error) {
    console.log(error);
  });

في هذا المثال، يتم تنفيذ ثلاث عمليات غير متزامنة واحدة تلو الأخرى، مما يسمح بالتعامل مع كل عملية على حدة بشكل سلس.

Promise.all() و Promise.race()

Promise.all()

تُستخدم هذه الدالة لانتظار اكتمال مجموعة من الوعود (Promises) في نفس الوقت. تعود Promise.all() بكائن Promise جديد يُعتبر “مكتملًا” عندما تكتمل جميع الوعود التي تم تمريرها إليها.

javascript
CopyEdit
let promise1 = new Promise(resolve => setTimeout(resolve, 1000, "العملية الأولى"));
let promise2 = new Promise(resolve => setTimeout(resolve, 2000, "العملية الثانية"));
let promise3 = new Promise(resolve => setTimeout(resolve, 1500, "العملية الثالثة"));

Promise.all([promise1, promise2, promise3])
  .then(function(values) {
    console.log(values); // ["العملية الأولى", "العملية الثانية", "العملية الثالثة"]
  })
  .catch(function(error) {
    console.log(error);
  });

Promise.race()

تُستخدم هذه الدالة عندما نريد معرفة أول وعد يتم تنفيذه سواء كان ناجحًا أو فاشلًا. تُعيد Promise.race() النتيجة بناءً على أول وعد يكتمل.

javascript
CopyEdit
let promise1 = new Promise(resolve => setTimeout(resolve, 1000, "العملية الأولى"));
let promise2 = new Promise(resolve => setTimeout(resolve, 2000, "العملية الثانية"));

Promise.race([promise1, promise2])
  .then(function(value) {
    console.log(value); // "العملية الأولى"
  })
  .catch(function(error) {
    console.log(error);
  });

أهمية الـ Promise في البرمجة الحديثة

إن الـ Promise تمثل تطورًا كبيرًا في طريقة تعامل JavaScript مع العمليات غير المتزامنة، حيث تُسهم في جعل الكود أكثر وضوحًا وسهولة في الصيانة. قبل ظهور الـ Promise، كان استخدام النداءات المتداخلة (Callback) هو الطريقة الشائعة لتنفيذ العمليات غير المتزامنة، إلا أن هذه الطريقة كانت تُنتج كودًا معقدًا وصعبًا للفهم خاصة في الحالات التي تحتوي على عمليات متعددة.

كما أن استخدام الـ Promise يتيح لنا العمل على تحسين الأداء، بحيث يمكن تنفيذ العديد من العمليات في الوقت نفسه دون التأثير على تجربة المستخدم، وهو أمر بالغ الأهمية في تطبيقات الويب الحديثة التي تعتمد على الحصول على البيانات من الخوادم (APIs) بشكل مستمر.

خلاصة

تعتبر الـ Promise من الأدوات الأساسية في JavaScript، فهي تمثل تطورًا مهمًا في طريقة التعامل مع العمليات غير المتزامنة. تقدم الـ Promise طريقة منسقة وسهلة لكتابة الكود غير المتزامن دون الوقوع في فخ النداءات المتداخلة (Callback Hell). من خلال هذه الواجهة البرمجية، يمكن تحسين كفاءة الأداء وجعل الكود أكثر وضوحًا وقابلاً للصيانة، مما يساهم في تطوير تطبيقات أكثر استقرارًا وسهولة في الفهم.